<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文件上传中心</title>
    <link href="assets/css/bootstrap.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="assets/js/webuploader/css/webuploader.css">
    <link rel="stylesheet" href="assets/js/webuploader/upload/css/upload.css">
    <link rel="stylesheet" href="assets/js/viewer/css/viewer.css"/>
</head>
<body>
<div class="row">
    <div class="col-lg-12 col-sm-12 col-xs-12">
        <div class="widget flat radius-bordered">
            <div class="widget-body">
                <div class="widget-main ">
                    <div class="tabbable">
                        <ul class="nav nav-tabs tabs-flat">
                            <li class="active"><a data-toggle="tab"
                                                  href="#uploadFilePane"> 上传文件 </a></li>
                            <li class=""><a data-toggle="tab" href="#fileListPane">
                                资源库 </a></li>
                        </ul>
                        <div class="tab-content tabs-flat">
                            <div id="uploadFilePane" class="tab-pane active">
                                <div id="wrapper">
                                    <div id="container">
                                        <div id="uploader">
                                            <div class="queueList">
                                                <div id="dndArea" class="placeholder">
                                                    <div id="filePicker"></div>
                                                    <p>或将文件拖到这里，单次最多可选<span id="sumCount"></span>个文件</p>
                                                </div>
                                            </div>
                                            <div class="statusBar" style="display:none;">
                                                <div class="progress">
                                                    <span class="text">0%</span> <span class="percentage"></span>
                                                </div>
                                                <div class="info"></div>
                                                <div class="btns">
                                                    <div id="filePicker2"></div>
                                                    <div class="uploadBtn">开始上传</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div id="fileListPane" class="tab-pane">
                                <p>文件列表</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
<script src="assets/js/jquery-2.0.3.min.js"></script>
<script src="assets/js/viewer/js/viewer.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/bootbox/bootbox.js"></script>
<script type="text/javascript">
    var width = "${width[0]}";
    var height = "${height[0]}";
    var serialize = "${serialize[0]}";
    var topJq = window.parent.$;
    topJq(".uploadDialog .modal-dialog").css({
        width: width + "px",
        height: height + "px"
    });
    topJq(".uploadDialog #uploadDialog" + serialize).css({
        height: (height - 100) + "px"
    });
    var groupName = "${groupName[0]}" || new Date().getTime();
    var sizes = "${sizes[0]}" || "";
    var isImg = "${isImg[0]}" || false;
    var imgMaxWidth = "${imgMaxWidth[0]}" || -1;//当上传文件限制为图片文件时，图片的最大宽度
    var imgMaxHeight = "${imgMaxHeight[0]}" || -1;//当上传文件限制为图片文件时，图片的最大高度
    var accept = {};

    if (isImg && isImg == "true") {
        accept = {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png,psd',
            mimeTypes: 'image/jpg,image/jpeg,image/png,image/gif,image/bmp,image/psd,image/JPG,image/JPEG,image/PNG,image/GIF,image/BMP,image/PSD'//常用图片格式
        }
    }else{
        try {
            accept = JSON.parse('${accept[0]}') || {};//指定接受哪些类型的文件
        } catch (e) {
        }
    }
    console.log(accept);
    //上传插件参数
    var server = "fileUpload/upload.do";//上传路径
    var previewUrl = "fileUpload/preview.do";//图片预览
    var decodeUrl = "fileUpload/decode.do";//图片解码
    var fileNumLimit = "${fileNumLimit[0]}" || 300;//验证文件总数量, 超出则不允许加入队列。
    $("#sumCount").text(fileNumLimit);//修改提示
    var multiple = fileNumLimit > 1;//是否单选
    var fileSizeLimit = "${fileSizeLimit[0]}" || 200 * 1024 * 1024; // 200 M 验证文件总大小是否超出限制, 超出则不允许加入队列。
    var fileSingleSizeLimit = "${fileSingleSizeLimit[0]}" || 50 * 1024 * 1024; // 50 M 验证单个文件大小是否超出限制, 超出则不允许加入队
</script>
<script src="assets/js/webuploader/webuploader.js"></script>
<script src="assets/js/webuploader/upload/upload.js"></script>
<script type="text/javascript" src="assets/js/custom/syscommons.js"></script>
<script>
    // WebUploader实例
    var uploader = undefined;
    //清空缓存文件
    clearCacheFile(function () {
        uploader = initWebUploader()
    });
    setTimeout(function () {
        $(".queueList").height($(window).height() - 183);
        $(".placeholder").height($(window).height() - 385);
        $("#container").height($(window).height() - 80);
    }, 200)

    /**
     * 点击确认时的回调函数
     * @param callback 回调函数
     */
    function confirmCallback(callback) {
        if (typeof (callback) === "function") {
            callback(uploader.uploadResult);
        }
    }

    /**
     * 点击取消时的回调函数
     * @param callback 回调函数
     */
    function cancelCallback(callback) {
        clearCacheFile(callback);
    }

    function clearCacheFile(callback) {
        console.log("clear temp file ...")
        ajaxRequest("fileUpload/clearTempFile.do", {groupName: groupName}, function (result) {
            if (result.resCode == "200") {
                if (typeof (callback) === "function") {
                    callback();
                }
            } else {
                var message = result.resMsg;
                getTopWin().bootbox.alert({
                    title: "错误提示",
                    size: 'small',
                    message: message
                });
            }
        },
        function (XMLHttpRequest, textStatus, errorThrown) {
            ajaxError(errorThrown);
        }, "GET", "JSON")
    }
</script>
</body>
</html>